<template>
    <div class="home">
        <article class="article" v-for="(item, index) in list" :key="item.id">
           <ArticleHead />
           <article class="article-content" ref="preview" id="preview-md" v-html="item.htmlText"></article>
            <div class="article-btn" @click="onDetails(item.id)">查看详情</div>
        </article>
        <Pagingtion :currentPage.sync="paging.page" :pageSize="paging.size" :total="paging.total" @changePage="onChangePage" />
    </div>
</template>

<script>
    import marked from 'marked'
    import Prism from 'prismjs' // 代码高亮
    import Cache from '@/utils/cache/index'
    let cache = new Cache()
    cache.setCacheType = 'sessionStorage'
    import constant from '@/utils/constant'
    const { CACHE_HOME_TOP_ARTICLE } = constant

    import { getHomeArticleList } from '@/api/home'

    export default {
        data () {
            return {
                list: [],
                paging: {
                    page: 1,
                    size: 10,
                    total: 0,
                }
            }
        },
        created () {
            this.getTopArticleList()
            // this.getHomeArticleListFn()
        },
        methods: {
            getTopArticleList () {
                let { page } = this.paging
                cache.getPagingCache(CACHE_HOME_TOP_ARTICLE, page, (cacheData) => {
                    if (!cacheData) {
                        return this.getHomeArticleListFn()
                    }
                    let { paging, result } = cacheData
                    this.handleList(paging, result)
                })
            },
            async getHomeArticleListFn () {
                let { result, paging } = await getHomeArticleList(this.paging)

                let data = {
                    paging,
                    result,
                }
                cache.setPagingCache(CACHE_HOME_TOP_ARTICLE, data)

                this.handleList(paging, result)
            },
            handleList (paging, result) {
                result.forEach((item) => {
                    let htmlText = marked(item.content)
                    item.htmlText = htmlText
                })
                this.list = result
                this.paging.total = paging.total

                this.$nextTick(() => {
                    Prism.highlightAll()
                })
            },
            onChangePage (page) {
                this.paging.page = page
                this.getTopArticleList()
            },
            onDetails (articleId) {
                this.$router.push({
                    name: 'article',
                    params: {
                        articleId,
                    },
                })
            },
        }
    }
</script>

<style scoped>
    .home {
        margin: auto;
        padding-bottom: 50px;
        max-width: 800px;
    }
    .article {
        margin-bottom: 80px;
    }

    .article-content {
        margin: 20px 0!important;
        text-align: center!important;
        max-height: 200px;
        overflow: hidden;
    }

    .article-btn {
        margin: auto;
        width: 120px;
        line-height: 35px;
        border: 1px solid #000;
        cursor: pointer;
    }
</style>
